<template>
  <div class="forum-container">
    <!-- 顶部导航栏 -->
    <a-layout-header class="header">
      <div class="header-content">
        <div class="logo">
          <h1 class="logo-text">
            <span class="primary">天际</span>
            <span class="secondary">论坛</span>
          </h1>
        </div>
        <div class="search-container">
          <a-input-search
            v-model:value="state.searchText"
            placeholder="搜索帖子..."
            style="width: 500px"
            @search="onSearch"
          >
            <template #prefix>
              <SearchOutlined style="color: rgba(0, 0, 0, 0.45)" />
            </template>
          </a-input-search>
        </div>
        <div class="header-right">
          <div class="action-group">
            <a-button 
              type="primary" 
              class="create-post-btn" 
              @click="goToCreatePost"
              size="large"
            >
              <template #icon><PlusOutlined /></template>
              发布帖子
            </a-button>
          </div>
          <div class="user-actions">
            <template v-if="isLoggedIn">
              <a-dropdown>
                <a-avatar :src="userAvatar" class="user-avatar hover-scale" />
                <template #overlay>
                  <a-menu>
                    <a-menu-item key="my-posts" @click="$router.push('/my-posts')">
                      <FileTextOutlined />我的帖子
                    </a-menu-item>
                    <a-menu-item key="favorites" @click="$router.push('/favorites')">
                      <StarOutlined />我的收藏
                    </a-menu-item>
                    <a-menu-item key="messages" @click="$router.push('/messages')">
                      <BellOutlined />消息中心
                      <a-badge 
                        v-if="unreadMessages" 
                        :count="unreadMessages" 
                        :offset="[10, 0]"
                      />
                    </a-menu-item>
                    <a-menu-item key="profile" @click="$router.push('/profile')">
                      <UserOutlined />个人中心
                    </a-menu-item>
                    <a-menu-item key="settings">
                      <SettingOutlined />设置
                    </a-menu-item>
                    <a-menu-divider />
                    <a-menu-item key="logout" @click="handleLogout">
                      <LogoutOutlined />退出
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </template>
            <template v-else>
              <a-button 
                type="link" 
                class="login-btn hover-scale" 
                size="large"
                @click="goToLogin"
              >
                登录
              </a-button>
            </template>
          </div>
        </div>
      </div>
    </a-layout-header>

    <a-layout class="main-content">
      <!-- 左侧导航 -->
      <a-layout-sider width="200" class="left-sider">
        <a-menu
          mode="inline"
          v-model:selectedKeys="state.selectedKeys"
          class="side-menu"
          @click="handleMenuClick"
        >
          <a-menu-item key="home">
            <template #icon><HomeOutlined /></template>
            首页
          </a-menu-item>
          <a-menu-item key="hot">
            <template #icon><FireOutlined /></template>
            热门
          </a-menu-item>
          <a-menu-item key="newest">
            <template #icon><ClockCircleOutlined /></template>
            最新
          </a-menu-item>
        </a-menu>
      </a-layout-sider>

      <a-layout-content class="content-area">
        <!-- 轮播公告 -->
        <a-carousel 
          autoplay 
          class="announcement-carousel"
          :dots="true"
          :autoplaySpeed="5000"
          effect="fade"
        >
          <div v-for="notice in announcements" :key="notice.id" class="carousel-item">
            <div class="notice-item">
              <NotificationOutlined class="notice-icon" />
              <div class="notice-content">
                <h3 class="notice-title">{{ notice.title }}</h3>
                <p class="notice-text">{{ notice.content }}</p>
                <div class="notice-meta">
                  <span class="notice-date">
                    <ClockCircleOutlined /> {{ formatTime(notice.date || notice.createdAt) }}
                  </span>
                  <span class="notice-category">{{ notice.category }}</span>
                </div>
              </div>
              <div class="notice-action">
                <a-button type="link">
                  查看详情 <RightOutlined />
                </a-button>
              </div>
            </div>
          </div>
        </a-carousel>

        <!-- 热门帖子 -->
        <a-card 
          class="section-card" 
          :title="state.selectedKeys[0] === 'hot' ? '热门帖子' : '热门推荐'"
          v-if="state.selectedKeys[0] === 'hot' || state.selectedKeys[0] === 'home'"
        >
          <template #extra v-if="state.selectedKeys[0] === 'hot'">
            <a-space>
              <a-select
                v-model:value="state.timeRange"
                style="width: 120px"
                @change="handleTimeRangeChange"
              >
                <a-select-option value="all">全部时间</a-select-option>
                <a-select-option value="day">24小时内</a-select-option>
                <a-select-option value="week">本周内</a-select-option>
                <a-select-option value="month">本月内</a-select-option>
              </a-select>
              <a-select
                v-model:value="state.sortType"
                style="width: 120px"
                @change="handleSortChange"
              >
                <a-select-option value="hot">按热度</a-select-option>
                <a-select-option value="views">按浏览量</a-select-option>
                <a-select-option value="replies">按回复数</a-select-option>
              </a-select>
            </a-space>
          </template>
          <a-list 
            :data-source="hotPosts" 
            :loading="state.loading"
            class="post-list"
          >
            <template #renderItem="{ item }">
              <a-list-item class="post-item" @click="$router.push(`/post/${item.id}`)">
                <a-list-item-meta>
                  <template #avatar>
                    <a-avatar :src="item.authorAvatar" @click.stop />
                  </template>
                  <template #title>
                    <span class="post-title">{{ item.title }}</span>
                  </template>
                  <template #description>
                    <div class="post-meta">
                      <span class="meta-item author" @click.stop="$router.push(`/user/${item.authorId}`)">
                        <UserOutlined /> {{ item.author }}
                      </span>
                      <span class="meta-item">
                        <EyeOutlined /> {{ item.views }} 浏览
                      </span>
                      <span class="meta-item">
                        <MessageOutlined /> {{ item.comments }} 评论
                      </span>
                      <span class="meta-item">
                        <ClockCircleOutlined /> {{ formatTime(item.createdAt) }}
                      </span>
                    </div>
                  </template>
                </a-list-item-meta>
                <div class="post-tags" @click.stop>
                  <a-tag v-if="item.isHot" class="hot-tag">热门</a-tag>
                  <a-tag v-if="item.isTop" class="top-tag">置顶</a-tag>
                </div>
              </a-list-item>
            </template>
          </a-list>
        </a-card>

        <!-- 最新帖子 -->
        <a-card class="section-card" title="最新发布">
          <a-list :data-source="latestPosts" :loading="state.loading" class="post-list">
            <template #renderItem="{ item }">
              <a-list-item class="post-item hover-shadow" @click="$router.push(`/post/${item.id}`)">
                <a-list-item-meta>
                  <template #avatar>
                    <a-avatar :src="item.authorAvatar || item.avatar" @click.stop />
                  </template>
                  <template #title>
                    <span class="post-title">{{ item.title }}</span>
                  </template>
                  <template #description>
                    <div class="post-meta">
                      <a-space>
                        <span class="meta-item author" @click.stop="$router.push(`/user/${item.authorId || item.userId}`)">
                          <UserOutlined /> {{ item.author || item.username }}
                        </span>
                        <span class="meta-item">
                          <EyeOutlined /> {{ item.views }} 浏览
                        </span>
                        <span class="meta-item">
                          <MessageOutlined /> {{ item.comments }} 评论
                        </span>
                        <span class="meta-item">
                          <ClockCircleOutlined /> {{ formatTime(item.createdAt || item.createTime) }}
                        </span>
                      </a-space>
                    </div>
                  </template>
                </a-list-item-meta>
                <div class="post-tags" @click.stop>
                  <a-tag v-if="item.isHot" class="hot-tag">热门</a-tag>
                  <a-tag v-if="item.isTop || item.isEssence" class="top-tag">{{ item.isTop ? '置顶' : '精华' }}</a-tag>
                </div>
              </a-list-item>
            </template>
          </a-list>
        </a-card>
      </a-layout-content>

      <a-layout-sider width="300" class="right-sider">
        <!-- 用户信息卡片 -->
        <a-card class="user-card hover-shadow" :bordered="false" @click="$router.push('/profile')">
          <template #cover>
            <div class="cover-wrapper">
              <img alt="cover" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />
            </div>
          </template>
          <template #actions>
            <a-button type="link" @click.stop="$router.push('/my-posts')">我的帖子</a-button>
            <a-button type="link" @click.stop="$router.push('/favorites')">我的收藏</a-button>
            <a-button type="link" @click.stop="$router.push('/messages')">
              消息中心
              <a-badge 
                v-if="unreadMessages" 
                :count="unreadMessages" 
                :offset="[10, 0]"
              />
            </a-button>
          </template>
          <a-card-meta :title="isLoggedIn ? '欢迎回来' : '请登录'" :description="isLoggedIn ? '这里是您的个人空间' : '登录后体验更多功能'">
            <template #avatar>
              <a-avatar :src="userAvatar" />
            </template>
          </a-card-meta>
        </a-card>

        <!-- 活跃用户 -->
        <a-card title="活跃用户" class="active-users-card">
          <a-list :data-source="activeUsers" size="small">
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta>
                  <template #avatar>
                    <a-avatar :src="item.avatar" />
                  </template>
                  <template #title>{{ item.username }}</template>
                  <template #description>
                    <span>发帖 {{ item.posts || item.postsCount }}</span>
                    <span>回复 {{ item.replies || item.commentsCount }}</span>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </a-card>
      </a-layout-sider>
    </a-layout>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { useMessageStore } from '@/stores/message'
import { getHotPosts, getLatestPosts, getAnnouncements, getActiveUsers } from '@/api/home'
import type { Announcement, ActiveUser } from '@/api/home'
import type { Post } from '@/api/post'
import { message } from 'ant-design-vue'
import {
  HomeOutlined,
  FireOutlined,
  ClockCircleOutlined,
  UserOutlined,
  EyeOutlined,
  MessageOutlined,
  PlusOutlined,
  SettingOutlined,
  LogoutOutlined,
  NotificationOutlined,
  RightOutlined,
  FileTextOutlined,
  StarOutlined,
  BellOutlined,
  SearchOutlined
} from '@ant-design/icons-vue'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'

dayjs.extend(relativeTime)
dayjs.locale('zh-cn')

interface State {
  searchText: string
  selectedKeys: string[]
  sortType: 'hot' | 'views' | 'replies'
  timeRange: 'all' | 'day' | 'week' | 'month'
  loading: boolean
}

const router = useRouter()
const userStore = useUserStore()
const messageStore = useMessageStore()

// 状态
const state = ref<State>({
  searchText: '',
  selectedKeys: ['home'],
  sortType: 'hot',
  timeRange: 'all',
  loading: false
})

// 计算属性
const isLoggedIn = computed(() => userStore.isLoggedIn)
const userAvatar = computed(() => {
  const defaultAvatar = '/default-avatar.png' // 默认头像路径
  if (!userStore.userInfo) return defaultAvatar
  return userStore.userInfo.picture || defaultAvatar
})
const username = computed(() => userStore.userInfo?.username || '游客')
const unreadMessages = computed(() => messageStore.unreadCount)

// 数据
const announcements = ref<Announcement[]>([])
const hotPosts = ref<Post[]>([])
const latestPosts = ref<Post[]>([])
const activeUsers = ref<ActiveUser[]>([])

// 加载数据
const loadHomeData = async () => {
  state.value.loading = true
  try {
    // 获取所有数据
    const [hotPostsResp, latestPostsResp, announcementsResp, activeUsersResp] = await Promise.all([
      getHotPosts(),
      getLatestPosts(),
      getAnnouncements(),
      getActiveUsers()
    ])

    // 处理响应格式 - 我们需要检查响应的格式并提取data部分
    const extractData = (response: any) => {
      if (!response) return [];
      // 如果响应有code和data字段，则应该提取data部分
      if (typeof response === 'object' && 'code' in response && 'data' in response) {
        return response.data;
      }
      // 已经是数组则直接返回
      if (Array.isArray(response)) {
        return response;
      }
      console.warn('未能识别的响应格式:', response);
      return []; // 返回空数组以避免错误
    };

    hotPosts.value = extractData(hotPostsResp);
    latestPosts.value = extractData(latestPostsResp);
    announcements.value = extractData(announcementsResp);
    activeUsers.value = extractData(activeUsersResp);
    
    console.log("成功加载数据:", {
      hotPosts: hotPosts.value.length,
      latestPosts: latestPosts.value.length,
      announcements: announcements.value.length,
      activeUsers: activeUsers.value.length
    })
  } catch (error) {
    console.error('加载首页数据失败:', error)
    message.error('加载数据失败，请刷新重试')
  } finally {
    state.value.loading = false
  }
}

// 监听路由变化
watch(
  () => router.currentRoute.value.path,
  (path) => {
    if (path === '/') {
      state.value.selectedKeys = ['home']
    } else if (path === '/hot') {
      state.value.selectedKeys = ['hot']
    }
  },
  { immediate: true }
)

// 监听菜单点击
const handleMenuClick = (event: { key: string }) => {
  if (event.key === 'hot') {
    router.push('/hot')
    loadHotPosts()
  } else if (event.key === 'home') {
    router.push('/')
  }
}

// 加载热门帖子
const loadHotPosts = async () => {
  state.value.loading = true
  try {
    const response = await getHotPosts()
    // 处理响应格式
    if (response && typeof response === 'object' && 'code' in response && 'data' in response) {
      hotPosts.value = (response as any).data
    } else if (Array.isArray(response)) {
      hotPosts.value = response
    } else {
      console.warn('未能识别的热门帖子响应格式:', response)
      hotPosts.value = []
    }
  } catch (error) {
    console.error('Failed to load hot posts:', error)
    message.error('加载热门帖子失败')
  } finally {
    state.value.loading = false
  }
}

// 排序方法
const handleSortChange = (value: State['sortType']) => {
  state.value.sortType = value
  loadHotPosts()
}

// 时间范围筛选
const handleTimeRangeChange = (value: State['timeRange']) => {
  state.value.timeRange = value
  loadHotPosts()
}

// 搜索方法
const onSearch = (value: string) => {
  if (value.trim()) {
    router.push({
      path: '/search',
      query: { q: value.trim() }
    })
  }
}

// 发帖方法
const goToCreatePost = () => {
  if (isLoggedIn.value) {
    router.push('/create-post')
  } else {
    router.push('/login?redirect=/create-post')
  }
}

// 登录方法
const goToLogin = () => {
  try {
    router.push('/login')
  } catch (error) {
    console.error('导航失败:', error)
    // 尝试另一种导航方式
    window.location.href = '/login'
  }
}

// 登出方法
const handleLogout = async () => {
  await userStore.logout()
  router.push('/login')
}

// 格式化时间
const formatTime = (time: string | null): string => {
  if (!time) return '未知时间'
  try {
    // 尝试使用dayjs格式化时间
    return dayjs(time).fromNow()
  } catch (error) {
    console.error('时间格式化错误:', error, time)
    // 如果格式化失败，返回原始字符串或默认值
    return time || '未知时间'
  }
}

// 初始化
onMounted(async () => {
  if (userStore.isLoggedIn) {
    await messageStore.fetchMessages()
  }
  await loadHomeData()
  
  // 添加数据结构调试日志
  console.log('announcements 数据类型:', Array.isArray(announcements.value) ? '数组' : typeof announcements.value);
  console.log('hotPosts 数据类型:', Array.isArray(hotPosts.value) ? '数组' : typeof hotPosts.value);
  console.log('latestPosts 数据类型:', Array.isArray(latestPosts.value) ? '数组' : typeof latestPosts.value);
  console.log('activeUsers 数据类型:', Array.isArray(activeUsers.value) ? '数组' : typeof activeUsers.value);
  
  // 添加数据结构调试日志
  console.log('announcements 数据长度:', announcements.value?.length || 0);
  console.log('hotPosts 数据长度:', hotPosts.value?.length || 0);
  console.log('latestPosts 数据长度:', latestPosts.value?.length || 0);
  console.log('activeUsers 数据长度:', activeUsers.value?.length || 0);
  
  // 检查字段名
  if (announcements.value && announcements.value.length > 0) {
    console.log('公告字段名:', Object.keys(announcements.value[0]))
  }
  if (hotPosts.value && hotPosts.value.length > 0) {
    console.log('帖子字段名:', Object.keys(hotPosts.value[0]))
  }
  if (activeUsers.value && activeUsers.value.length > 0) {
    console.log('用户字段名:', Object.keys(activeUsers.value[0]))
  }
})
</script>

<style lang="scss" scoped>
@mixin hover-animation {
  transition: all 0.3s ease;
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
}

@mixin card-base {
  background: white;
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  animation: slideUp 0.6s ease-out;
  @include hover-animation;
}

.forum-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #f0f2f5 100%);

  .header {
    background: rgba(255, 255, 255, 0.95);
    padding: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    width: 100%;
    z-index: 1000;
    transition: all 0.3s ease;
    margin-bottom: 24px;

    &:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    .header-content {
      max-width: 1400px;
      margin: 0 auto;
      height: 64px;
      display: flex;
      align-items: center;
      padding: 0 24px;
      justify-content: space-between;

      .logo {
        flex-shrink: 0;
        .logo-text {
          margin: 0;
          font-size: 28px;
          font-weight: bold;
          .primary {
            color: #1890ff;
            margin-right: 4px;
          }
          .secondary {
            color: #722ed1;
          }
        }
      }

      .search-container {
        flex: 1;
        display: flex;
        justify-content: center;
        margin: 0 48px;
        max-width: 600px;

        :deep(.ant-input-affix-wrapper) {
          border-radius: 8px;
          height: 40px;
          border: 2px solid transparent;
          transition: all 0.3s ease;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

          &:hover {
            border-color: #40a9ff;
            transform: translateY(-1px);
          }

          .ant-input {
            font-size: 14px;
          }
        }

        :deep(.ant-input-search-button) {
          height: 40px;
          width: 60px;
          border-radius: 0 8px 8px 0;
          background: linear-gradient(45deg, #1890ff, #40a9ff);
          border: none;
          transition: all 0.3s ease;

          &:hover {
            opacity: 0.9;
            transform: translateX(1px);
          }

          .anticon {
            color: white;
            font-size: 16px;
          }
        }
      }

      .header-right {
        display: flex;
        align-items: center;
        gap: 24px;

        .action-group {
          .create-post-btn {
            background: linear-gradient(45deg, #1890ff, #40a9ff);
            border: none;
            border-radius: 8px;
            height: 40px;
            padding: 0 24px;
            font-weight: 500;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
            transition: all 0.3s ease;

            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 6px 16px rgba(24, 144, 255, 0.4);
              background: linear-gradient(45deg, #40a9ff, #1890ff);
            }

            .anticon {
              font-size: 16px;
            }
          }
        }

        .user-actions {
          display: flex;
          align-items: center;
          gap: 16px;

          .user-avatar {
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.3s ease;
            width: 50px !important;
            height: 50px !important;
            font-size: 20px !important;

            &:hover {
              border-color: #1890ff;
              transform: scale(1.1);
            }
          }

          .login-btn {
            font-weight: 500;
            height: 40px;
            padding: 0 24px;
            font-size: 14px;

            &:hover {
              color: #1890ff;
              background: rgba(24, 144, 255, 0.1);
            }
          }
        }
      }
    }
  }

  .main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    gap: 24px;

    .left-sider {
      background: transparent;
      width: 240px !important;
      margin-right: 24px;

      .side-menu {
        background: transparent;
        border-right: none;
        padding: 8px;

        :deep(.ant-menu-item) {
          height: 44px;
          line-height: 44px;
          margin: 4px 0;
          padding: 0 16px;
          border-radius: 8px;
          transition: all 0.3s ease;

          .anticon {
            font-size: 18px;
          }

          &:hover {
            color: #1890ff;
            background: rgba(24, 144, 255, 0.1);
            transform: translateX(4px);
          }

          &.ant-menu-item-selected {
            background: linear-gradient(45deg, #1890ff, #40a9ff);
            color: white;
            font-weight: 500;
            box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);

            &:hover {
              transform: translateX(4px);
              box-shadow: 0 6px 16px rgba(24, 144, 255, 0.3);
            }
          }
        }

        :deep(.ant-menu-submenu) {
          .ant-menu-submenu-title {
            height: 44px;
            line-height: 44px;
            margin: 4px 0;
            padding: 0 16px;
            border-radius: 8px;
            transition: all 0.3s ease;

            .anticon {
              font-size: 18px;
            }

            &:hover {
              color: #1890ff;
              background: rgba(24, 144, 255, 0.1);
            }
          }

          .ant-menu-sub {
            background: transparent;
            padding-left: 16px;
          }
        }
      }
    }

    .content-area {
      flex: 1;
      min-width: 0;
      padding: 0 !important;

      .announcement-carousel {
        @include card-base;
        
        .carousel-item {
          height: 120px;
          background: linear-gradient(to right, #ffffff, #f8f9fa);
          padding: 24px;

          .notice-item {
            display: flex;
            align-items: flex-start;
            height: 100%;
            transition: all 0.3s ease;

            &:hover {
              transform: translateX(4px);
              .notice-icon {
                transform: scale(1.1);
                color: #1890ff;
              }
              .notice-title {
                color: #1890ff;
              }
            }

            .notice-icon {
              font-size: 24px;
              color: #8c8c8c;
              margin-right: 16px;
              transition: all 0.3s ease;
            }

            .notice-content {
              flex: 1;
              .notice-title {
                font-size: 18px;
                font-weight: 600;
                color: #262626;
                margin: 0 0 8px;
                transition: all 0.3s ease;
              }
              .notice-text {
                font-size: 14px;
                color: #595959;
                margin: 0;
                line-height: 1.5;
              }
              .notice-meta {
                margin-top: 8px;
                color: #8c8c8c;
                font-size: 13px;
                .notice-date {
                  margin-right: 16px;
                }
                .notice-category {
                  color: #1890ff;
                  font-weight: 500;
                }
              }
            }
          }
        }

        :deep(.ant-carousel .slick-dots) {
          bottom: 12px;
          li {
            button {
              background: rgba(0, 0, 0, 0.2);
              border-radius: 4px;
              width: 16px;
              height: 3px;
              transition: all 0.3s ease;
            }
            &.slick-active button {
              background: #1890ff;
              width: 24px;
            }
          }
        }
      }

      .section-card {
        @include card-base;

        :deep(.ant-card-head) {
          padding: 16px 24px;
          border-bottom: 1px solid #f0f0f0;
          background: linear-gradient(to right, #ffffff, #f8f9fa);

          .ant-card-head-title {
            font-size: 18px;
            font-weight: 600;
            background: linear-gradient(45deg, #1890ff, #40a9ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }

        .post-list {
          .post-item {
            padding: 16px 24px;
            transition: all 0.3s ease;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            position: relative;

            &:last-child {
              border-bottom: none;
            }

            &:hover {
              background: linear-gradient(to right, rgba(24, 144, 255, 0.02), transparent);
              transform: translateX(4px);

              &::after {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 4px;
                height: 100%;
                background: linear-gradient(to bottom, #1890ff, #40a9ff);
                border-radius: 2px;
                opacity: 0.8;
              }

              .ant-avatar {
                transform: scale(1.1);
                border: 2px solid #1890ff;
              }

              .post-title {
                color: #1890ff;
              }
            }

            .ant-list-item-meta {
              align-items: center;

              :deep(.ant-avatar) {
                transition: all 0.3s ease;
                border: 2px solid transparent;
                width: 45px !important;
                height: 45px !important;
                font-size: 22px !important;
              }

              .post-title {
                font-size: 16px;
                font-weight: 500;
                color: #262626;
                transition: all 0.3s ease;
                margin: 0;
                line-height: 1.5;
              }

              .post-meta {
                margin-top: 8px;
                color: #8c8c8c;
                font-size: 13px;

                .meta-item {
                  margin-right: 16px;
                  &.author {
                    color: #1890ff;
                    font-weight: 500;
                    cursor: pointer;
                    transition: all 0.3s ease;

                    &:hover {
                      opacity: 0.8;
                      text-decoration: underline;
                    }
                  }
                }
              }
            }

            .post-tags {
              margin-top: 8px;
              display: flex;
              gap: 8px;

              .ant-tag {
                margin: 0;
                border-radius: 4px;
                padding: 2px 8px;
                font-size: 12px;
                border: none;
                transition: all 0.3s ease;
                cursor: pointer;

                &:hover {
                  transform: translateY(-1px);
                }

                &.hot-tag {
                  background: #fff2e8;
                  color: #fa541c;
                }
                &.top-tag {
                  background: #f6ffed;
                  color: #52c41a;
                }
              }
            }
          }
        }
      }
    }

    .right-sider {
      width: 300px !important;
      background: transparent;

      .user-card {
        background: white;
        border-radius: 12px;
        margin-bottom: 24px;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        }

        .cover-wrapper {
          height: 120px;
          overflow: hidden;
          position: relative;

          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1));
          }

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
          }

          &:hover img {
            transform: scale(1.1);
          }
        }

        :deep(.ant-card-meta) {
          margin: 16px 24px;

          .ant-avatar {
            width: 50px !important;
            height: 50px !important;
            font-size: 24px !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border: 2px solid white;
            transition: all 0.3s ease;
            
            &:hover {
              transform: scale(1.1);
              box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
              border-color: #1890ff;
            }
          }

          .ant-card-meta-title {
            color: #262626;
            font-size: 16px;
            margin-bottom: 4px;
          }

          .ant-card-meta-description {
            color: #8c8c8c;
            font-size: 13px;
          }
        }

        :deep(.ant-card-actions) {
          background: #fafafa;
          border-top: 1px solid #f0f0f0;

          li {
            margin: 12px 0;

            .ant-btn {
              color: #595959;
              font-size: 13px;

              &:hover {
                color: #1890ff;
              }

              .anticon {
                margin-right: 4px;
              }
            }
          }
        }
      }

      .active-users-card {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        animation: slideUp 0.6s ease-out;

        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        }

        :deep(.ant-card-head) {
          padding: 16px 24px;
          border-bottom: 1px solid #f0f0f0;
          background: linear-gradient(to right, #ffffff, #f8f9fa);

          .ant-card-head-title {
            font-size: 18px;
            font-weight: 600;
            background: linear-gradient(45deg, #1890ff, #40a9ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }

        :deep(.ant-list-item) {
          padding: 16px 24px;
          transition: all 0.3s ease;

          &:hover {
            background: linear-gradient(to right, rgba(24, 144, 255, 0.02), transparent);
            transform: translateX(4px);

            .ant-avatar {
              transform: scale(1.1);
              border: 2px solid #1890ff;
            }

            .ant-list-item-meta-title {
              color: #1890ff;
            }
          }

          .ant-avatar {
            transition: all 0.3s ease;
            border: 2px solid transparent;
            width: 45px !important;
            height: 45px !important;
            font-size: 22px !important;
          }

          .ant-list-item-meta-description {
            span {
              margin-right: 16px;
              color: #8c8c8c;
              
              &:hover {
                color: #1890ff;
              }
            }
          }
        }
      }
    }
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// Mobile-first responsive design
@media screen and (max-width: 768px) {
  .content-area {
    .announcement-carousel {
      .carousel-item {
        height: auto;
        min-height: 120px;
        padding: 16px;
      }
    }
    .section-card {
      .post-list {
        .post-item {
          padding: 12px 16px;
        }
      }
    }
  }
}
</style> 